<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>  
    <style>  
        *{  
            margin: 0;  
            padding: 0;  
        }  
        body{  
            overflow: hidden;  
        }  
        .box{  
            list-style: none;  
            width: 300px;  
            height: 300px;  
            position: relative;  
            margin: 100px auto;  
            transform-style: preserve-3d;  
            transform: rotateX(-180deg) rotateY(-180deg);  
            animation: rotate 4s linear 0s infinite normal;
        }  
        @keyframes rotate{  
            0%{  
                transform: rotateX(-180deg) rotateY(-180deg);  
            }  
            100%{  
                transform: rotateX(180deg) rotateY(180deg);  
            }  
        }  
        .box li{  
            position: absolute;  
            left: 0;  
            top: 0;  
            width: 300px;  
            height: 300px;  
            line-height: 300px;  
            text-align: center;  
            font-size: 40px;  
            color: #ffffff;  
        }  
        .box li:nth-child(1){  
            background: red;  
            transform: translateZ(150px);  
        }  
        .box li:nth-child(2){  
            background: blue;  
            transform: translateZ(-150px);  
        }  
        .box li:nth-child(3){  
            background: black;  
            transform: translateX(-150px) rotateY(-90deg);  
        }  
        .box li:nth-child(4){  
            background: green;  
            transform: translateX(150px) rotateY(90deg);  
        }  
        .box li:nth-child(5){  
            background: yellow;  
            transform: translateY(-150px) rotateX(90deg);  
        }  
        .box li:nth-child(6){  
            background: pink;  
            transform: translateY(150px) rotateX(-90deg);  
        }  
    </style>  
</head>  
<body>  
    <ul class="box">  
        <li>1</li>  
        <li>2</li>  
        <li>3</li>  
        <li>4</li>  
        <li>5</li>  
        <li>6</li>  
    </ul>  
</body>  
</html>  